<template>
  <div class="enterprise-risk-assessment">

    <Header />
    <div id="wrap">
      <!-- 左侧 -->
      <div class="LeftSide">
        <div class="LInner">
          <div class="title1">
            <h2>评估结果</h2>
          </div>
          <div class="main-container">
            <div class="item item1">
              <div class="item1-1">
                <img src="../../assets/images/11-1-评估结果logo.svg" alt="">
              </div>
              <div class="item1-2" style="width: 40px;height: 40px;background-color: red;"></div>
              <div class="item1-3">
               <div class="item1-3-1">
                <img src="../../assets/images/11-1-投资者logo.svg" alt="">
                <p>投资者</p>
                <img src="../../assets/images/11-1-金融机构logo.svg" alt="">
                <p>金融机构</p>
               </div>
              </div>
            </div>
            <div class="item item2">
              <img src="../../assets/images/11-1-逻辑回归logo.svg" alt="">
              <h2>逻辑回归</h2>
            </div>
            <div class="item item3">
              <img src="../../assets/images/11-1-情感分析logo.svg" alt="">
              <h2>情感分析</h2>
            </div>
            <div class="item item4">
              <img src="../../assets/images/11-1-识别企业logo.svg" alt="">
              <h2>识别企业</h2>
            </div>
            <div class="item item5">
              <img src="../../assets/images/11-1-数据处理logo.svg" alt="">
              <h2>数据处理</h2>
            </div>
            <div class="item item6">
              <img src="../../assets/images/11-1-金融舆情logo.svg" alt="">
              <h2>金融舆情</h2>
            </div>
          </div>
         </div>
      </div>

         <!-- 中间 -->
      <div class="center">
  
        <h1>深圳证券信息有限公司应用验证</h1>
        <h2>企业关联舆情风险预测值</h2>
        
      </div>

        <!-- 右侧 -->
      <div class="RightSide">
        <div class="RInner">
          <div class=" item"> </div>
          <div class=" item">  </div>
          <div class=" item item3"></div>
        </div>
      </div>
    </div>

   
    <Footer />
  </div>
  
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
</script>

<style lang="scss" scoped>
.enterprise-risk-assessment {
  height: 100%;
  background-image: url(../../assets/images/6-7背景图.jpg);
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
#wrap{
  width: 93%;
  height: 80%;
  margin: 0 auto;
  display: flex;

}

.LeftSide{
  flex: 0 0 20%;
  flex-grow: 1;
  height: 100%;
  background-color: rgba($color: #3F535D, $alpha: 0.7);
  display: flex;
  align-items: center;
  justify-content: center;

}
.LInner{
  height: 96%;
  width: 93%;
  margin: 0 auto;
  background-color: #2A3E4C;
  background-color: rgba($color: #2A3E4C, $alpha: 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.LeftSide .LInner .title1{
  font-size: 1.58rem;
  height: 6%;
  width: 100%;
}
.LeftSide .LInner .title1 h2{
  position: relative;
  left: 6%;
  top: 80%;
}
.LeftSide .LInner .main-container{
  height: 94%;
  width: 68%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.LeftSide .LInner .main-container .item:nth-child(n+1){
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content:space-between;
}

.LeftSide .LInner .main-container .item h2{
  font-size: 1.54rem;
}
.LeftSide .LInner .main-container .item p{
  font-size: 0.6rem;
  margin: 0 auto;
  margin-bottom: 8%;
  margin-top: 3%;
}
.LInner .main-container.item1{
  height: 30%;
}
.LInner .main-container .item1 .item1-1{
  position: relative;
  left: -5%;
}
.LInner .main-container .item1 .item1-3 .item1-3-1{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.LInner .main-container .item1 .item1-3 .item1-3-1 img{
  width: 46%;

}
.LInner .main-container .item2 img{
  position: relative;
  left: -3.9%;
}
.LInner .main-container .item3 img{
  position: relative;
  left: -2.9%;
}
.LInner .main-container .item4 img{
  width: 20%;
}
.LInner .main-container .item5 img{
  position: relative;
  left: -10.6%;
}









.center{
  flex: 0 0 60%;
  height: 100%;
} 
.title{
  display: inline-block;
}
.center h1{
  margin: 20px auto;
  font-size: 2rem;
  text-align: center;
}
.center h2{
  line-height: 180%;
  text-align: center;
  margin: 20px auto;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #079FC8;
  width: 40%;
  border-radius: 10px;
}



.RightSide{
  flex: 0 0 20%;
  background-color: rgba($color: #415662 , $alpha:0.6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}
.RInner{
  height: 96%;
  width: 93%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #A1A9AF;
  border-radius: 10px;
 
}
.RightSide .RInner .item{
  height: 33.3333%;
  width: 100%;
  border: 1px dashed black;
  border-radius: 10px;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.RightSide .RInner .item:last-child{
  margin-bottom: 0;
}
</style>

